//模拟考试打分

import React, { useState } from 'react';
import { Layout, Form, Input, Button, Rate, Typography, message, DatePicker,Select } from 'antd';
import { getUserId } from '@/utils/userId';
import { mockExamEvaluateAPI } from '@/api/coach';
import { use } from 'echarts';
import { getuserName } from '@/utils';

const { Content } = Layout;
const { Title } = Typography;

const Grade = () => {
  const [form] = Form.useForm();
  const [rating, setRating] = useState(0);
  const [mockExam,setMockExam] = useState()
  const [studentId,setStudentId]=useState()
  const [studentName,setStudentName] = useState()
  const [subject,setSubject]=useState()

  const handleRatingChange = (value) => {
    setRating(value);
  };
  const handleIDChange= (value)=>{
    setStudentId(value)
  }
  const handleNameChange=(value)=>{
    setStudentName(value)
  }
  const onChange = (date, dateString) => {
    console.log(date, dateString);
    setMockExam(dateString)
  };
  

  //提交模拟考试成绩表单
  const handleSubmit =async (values) => {
    const { comment } = values;
   const coachId =getUserId()
   const coachName=getuserName()
   await mockExamEvaluateAPI({
    mockExaminationDate:mockExam,
    mockExaminationName:subject,
    mockStudentId:studentId,
    mockExaminationCoachId:coachId,
    mockExaminationScore:rating,
    mockExaminationMessage:comment,
    mockStudentName:studentName,
    mockExaminationCoachName:coachName
   })
    // 模拟提交成功
    message.success('提交成功');
    // 提交成功后重置表单和评分
    form.resetFields();
    setRating(0);
  };
  const handleChange = (value) => {
    console.log(`selected ${value}`);
    setSubject(value)
  };
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Content style={{ padding: '50px' }}>
        <Title level={2}>模拟考试打分</Title>
        <Form form={form} onFinish={handleSubmit} layout="vertical">
        <Form.Item label="模拟考试日期" name="mockExam" rules={[{ required: true, message: '请选择模拟考试日期' }]}>
            <DatePicker onChange={onChange} />
        </Form.Item>
        <Form.Item label="科目" name="subject" 
          rules={[
            { required: true, 
            message: '请输入科目' 
            }
            ]}>
           <Select
      defaultValue="请选择"
      style={{
        width: 120,
      }}
      onChange={handleChange}
      options={[
        {
          value: '科目二',
          label: '科目二',
        },
        {
          value: '科目三',
          label: '科目三',
        },
      ]}
    />
          </Form.Item>
        <Form.Item label="学员ID" name="studentId" 
          rules={[
            { required: true, 
            message: '请输入学员ID' 
            }
            ]}>
            <Input  value ={rating}  onChange={(e)=>handleIDChange(e.target.value)}/>
          </Form.Item>
          <Form.Item label="学员姓名" name="studentName" 
          rules={[
            { required: true, 
            message: '请输入学员姓名' 
            }
            ]}>
            <Input  value ={rating}  onChange={(e)=>handleNameChange(e.target.value)}/>
          </Form.Item>
          <Form.Item label="学员评分" name="rating" 
          rules={[
            { required: true, 
            message: '请输入评分' 
            },
            {
              pattern: /^(0|[1-9]|[1-9]\d|100)$/,
              message: '请输入0到100之间的整数',
            },
            ]}>
            <Input  value ={rating} placeholder='请输入分数' onChange={(e)=>handleRatingChange(e.target.value)}/>
          </Form.Item>
          <Form.Item
            label="评语"
            name="comment"
            rules={[{ required: true, message: '请输入评语' }, { max: 100, message: '评语不能超过100个字符' }]}
          >
            <Input.TextArea rows={4} placeholder="请输入评语" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Content>
    </Layout>
  );
};

export default Grade;